<template>
    <view class="u-demo">
        <view class="u-demo-wrap">
            <view class="u-demo-title">演示效果</view>
            <view class="u-demo-area">
                <text class="no-net-tips">请断开手机的WiFi和移动数据来查看效果</text>
                <u-no-network :tips="tips" :image="image"></u-no-network>
            </view>
        </view>
        <view class="u-config-wrap">
            <view class="u-config-title u-border-bottom"> 参数配置 </view>
            <view class="u-config-item">
                <view class="u-item-title">自定义提示语</view>
                <u-subsection :current="1" :list="['是', '否']" @change="tipsChange"></u-subsection>
            </view>
            <view class="u-config-item">
                <view class="u-item-title">自定义图标</view>
                <u-subsection :current="1" :list="['是', '否']" @change="imageChange"></u-subsection>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let img =
    '';

const tips = ref('哎呀，网络信号丢失');
const image = ref<string>(img);

function tipsChange(index: number) {
    tips.value = index === 0 ? '人生得意须尽欢' : '哎呀，网络信号丢失';
}

function imageChange(index: number) {
    image.value = index === 0 ? 'https://ik.imagekit.io/anyup/uview-pro/no-network/no_network.png' : image.value;
}
</script>

<style scoped lang="scss">
.no-net-tips {
    color: $u-tips-color;
    font-size: 26rpx;
}
</style>
